<template>
	<view>
		<!-- 选向卡 -->
		<view class="table-list">
			<uni-forms :ref="formRef" :value="formData" :rules="rules" class="form-box">
				<view class="list-item" v-for="(item,index) in list" :key='index' v-show="item.hidden == '0' && (item.groupa == activeTagId || !item.groupa || activeTagId == '')">
					<!-- 输入框 -->
					<template v-if="item.type === 'text'">
						<view class="uni-form-item uni-column">
							<view class="title">{{i18n[item.name] ? i18n[item.name] : item.name}}</view>
							<view :class="['filed-body', item.disabled ? 'disable-style' : '']">
								<input class="uni-input" :type="item.inputType" v-model="formData[item.name]" :name="item.name" :placeholder="item.placeholder"
								 :disabled="item.disabled" @blur="binddata(item.name,$event.detail.value)" @change="meth[item.methodname](formData[item.name],formData,list) || ''"/>
							</view>
						</view>
					</template>
					<!-- 下拉框 -->
					<template v-else-if="item.type === 'select'">
						<view class="uni-form-item uni-column">
							<view class="title">{{i18n[item.name] ? i18n[item.name] : item.name}}</view>
							<view :class="['cell-detail','filed-body',item.disabled ? 'disable-style' : '']">
								<view class="icon iconfont icon-xiangyou fr" style="color: #999;"></view>
								<vvSelect v-model="formData[item.name]" :disabled="item.disabled" :name="item.name" placeholder="请选择" 
								 :list="item.optiona.data" valueKey="id" label="label" 
								 @change="item.methodname ? meth[item.methodname](item,formData,list) : ''"></vvSelect>
							</view>
						</view>
					</template>
					<!-- 单选 -->
					<template v-else-if="item.type === 'radio'">
						<view class="uni-form-item uni-column">
							<view class="title">{{i18n[item.name] ? i18n[item.name] : item.name}}</view>
							<evan-radio-group v-model="formData[item.name]">
								<evan-radio ﻿v-for="opt in item.optiona.data" :key="opt.id" :label="opt.label">{{opt.label}}</evan-radio>
							</evan-radio-group>
						</view>
					</template>
					<!-- 多选-->
					<template v-else-if="item.type === 'checkbox'">
						<view class="uni-form-item uni-column">
							<view class="title">{{i18n[item.name] ? i18n[item.name] : item.name}}</view>
							<evan-checkbox-group v-model="formData[item.name]">
								<evan-checkbox shape="square" ﻿v-for="opt in item.optiona.data" :key="opt.id" :label="opt.label" >{{opt.label}}</evan-checkbox>
							</evan-checkbox-group>
						</view>
					</template>
					<!--多行文本-->
					<template v-else-if="item.type === 'textarea'">
						<view class="uni-form-item uni-column">
							<view class="title">{{i18n[item.name] ? i18n[item.name] : item.name}}</view>
							<textarea v-model="formData[item.name]" :name="item.name" :placeholder="item.placeholder" />
							</view>
						</template>
						<!--日期-->
						<template v-else-if="item.type === 'date'">
							<view class="uni-form-item uni-column">
									<view class="title">{{i18n[item.name] ? i18n[item.name] : item.name}}</view>
									<view class="cell-detail" @click="selectDatePicker(item)">
										<view class="icon iconfont icon-xiangyou fr" style="color: #999;"></view>
										<input class="uni-input"
										 v-model="formData[item.name]"
										 :name="item.name"
										 placeholder="请选择"
										 :rules="item.rules"
										 disabled="true"
										 />
									</view>
							</view>
						</template>
						<!--模糊搜索-->
						<template v-else-if="item.type === 'autocomplete'">
							<view class="uni-form-item uni-column">
								<view class="title">{{i18n[item.name] ? i18n[item.name] : item.name}}</view>
								<my-input-search :formData="formData" v-model="formData[item.name]" :fetch-suggestions="meth[item.optiona.url]" @change="item.methodname ? meth[item.methodname]($event,item,formData,list) : ''" :placeholder="item.placeholder"></my-input-search>
								</view>
							</template>
						<!--选多条模糊搜索-->
						<template v-else-if="item.type === 'autocomplete-mix'">
							<view class="uni-form-item uni-column">
								<view class="title">{{i18n[item.name] ? i18n[item.name] : item.name}}</view>
								<my-fuzzy-input :formData="formData" v-model="formData[item.name]" :fetch-suggestions="meth[item.optiona.url]" @change="item.methodname ? meth[item.methodname]($event,item,formData,list) : ''"></my-fuzzy-input>
								</view>
							</template>
							<!-- 上传附件 -->
							<template v-else-if="item.type === 'upload'">
							</template>
							<!-- 省市级联表单 -->
							<template v-else-if="item.type === 'cascader'">
								<view class="uni-form-item uni-column">
									<view class="title">{{i18n[item.name] ? i18n[item.name] : item.name}}</view>
									<my-cascader :formData="formData" v-model="formData" ></my-cascader>
								</view>
							</template>
					</view>
				</uni-forms>
			</view>
		<date-time-picker ref='date-time' :indicatorStyle='indicatorStyle' :type='datePicker.type' :datestring='datePicker.datestring' @change='dateTimeChange'></date-time-picker>
	</view>
</template>


<script>
	import vvSelect from '@/components/vv-select/vv-select'
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import DateTimePicker from '@/components/bory-dateTimePicker/bory-dateTimePicker.vue'
	import myFuzzyInput from "@/components/my-fuzzy-input.vue"
	import myInputSearch from '@/components/my-input-search.vue'
	import myCascader from '@/components/my-cascader.vue'
	export default {
		props:{
			list:{
				default: [],
				type: Array
			},
			formData:{
				default: {
					SubmitTime: ''
				},
				type: Object
			},
			meth: {
				type: Object,
				default: null
			},
			formRef: {
				type: String,
				default: 'form'
			},
			activeTagId: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				datePicker: {
					type: 'date',
					datestring: ''
				},
				activeName: '',
				rules: {
					ID: {
						// name 字段的校验规则
						rules:[
								// 校验 name 不能为空
								{
										required: true,
										message: '请填写姓名',
								}
						],
						label:'姓名'
				}
				}
			};
		},
		computed: {
			i18n() {
				return this.$t('form')
			},
			indicatorStyle() {
				return {
					background: 'rgba(0,255,0,.2)',
					height: '40px',
				};
			}
		},
		components:{
			vvSelect,
			DateTimePicker,
			uniIcons,
			myFuzzyInput,
			myInputSearch,
			myCascader
		},
		methods:{
			// 弹出日期选择弹窗
			selectDatePicker(item){
				this.activeName = item.name
				this.datePicker.type = item.timetype ? item.timetype : 'date'
				
				this.$refs['date-time'].show();
			},
			// 日期选值之后
			dateTimeChange(value) {
				console.log(value)
				this.formData[this.activeName] = value
				console.log('formdate',this.formData)
				this.$forceUpdate()
			}
		}
	}
</script>

<style lang="scss">
	.list-item{
		background: #fff;
		border-bottom: 1px solid #e4e7ed;
		padding: 20rpx 30rpx;
		font-size: 28rpx;
		color: #303133;
		line-height: 70rpx;
		.title{
			
		}
		.uni-input{
			padding-left: 20rpx;
		}
	}
	.uni-form-item{
		
	}
	
	.fr{
		float: right;
	}
	.list-item .uni-input {
		border: none;
		background: transparent;
	}
	.disable-style{
		background-color: #f5f7fa;
		border-color: #e4e7ed;
		color: #c0c4cc;
		cursor: not-allowed;
	}
	.icon-tip{
		float: right;
		color: red;
	}
</style>
